<template>
    <div style="height: 90%">
        <!--商机信息-->
        <div style="border:1px solid #BFBFBF;padding: 10px;background-color: white;height: 140px">            <!--上-->
            <div>
                <el-row :gutter="20" style="height:41px">
                <el-col :span="6" style="padding-top: 5px">
                        <i class="el-icon-s-check" style="padding-left: 0px;font-size: 25px;"></i>
                        <span style="font-weight: bold;font-size: 18px;margin-left: 10px">{{hhdlist.barterNo}}</span>
                    </el-col>
                    <el-col :span="6" :offset="12">
                        <el-button class="el-icon-edit" style="margin-left: 100px">编辑</el-button>
                        <el-button class="el-icon-back">返回</el-button>
                    </el-col>
                </el-row>
            </div>
            <!--下-->
            <div style="border-top: 1px solid #DDDDDD;margin-top: 10px">
                <div style="height: 150px;margin-left: 10px;color: #BFBFBF">
                    <el-row type="flex" :gutter="20" style="margin-top: 20px">
                        <el-col :span="3">
                            <span style="color: gray">主题：</span>
                        </el-col>
                        <el-col :span="9">
                            <span style="color: black">{{this.hhdlist.barterTheme}}</span>
                        </el-col>
                        <el-col :span="3">
                            <span style="color: gray">换货单号：</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="color: black">{{this.hhdlist.barterNo}}</span>
                        </el-col>
                    </el-row>
                    <el-row type="flex" :gutter="20" style="margin-top: 15px">
                        <el-col :span="3">
                            <span style="color: gray">客户：</span>
                        </el-col>
                        <el-col :span="9">
                            <span style="color: black">{{this.hhdlist.clientId.clientName}}</span>
                        </el-col>
                        <el-col :span="3">
                            <span style="color: gray">订单：</span>
                        </el-col>
                        <el-col :span="4">
                            <span style="color: black">{{this.hhdlist.orderId.orderTheme}}</span>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <!--进度详情-->
        <div style="margin-top: 10px;border: 1px solid #BFBFBF;background-color: white;">
            <div>
                <template >
                    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                        <el-tab-pane label="基本信息" name="first" style="height: 410px;">
                            <div class="shugan" style="margin-left: 20px;"></div>
                            <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                            <el-form v-model="hhdlist" style="margin-left: 20px;" :label-position="labelPosition" >
                                <div>
                                    <div style="height: 150px;margin-left: 10px;">
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">发货订单：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{hhdlist.barterOrderNo.orderTheme}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">出库单：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{hhdlist.chukuId.chukuNo}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">状态：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{hhdlist.barterState}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">退入仓库：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{hhdlist.barterWarehouse}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 15px">
                                            <el-col :span="2">
                                                <span style="color: gray">负责人：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{hhdlist.barterOperator}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">备注：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{hhdlist.barterRemark}}</span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex" :gutter="20" style="margin-top: 20px">
                                            <el-col :span="2">
                                                <span style="color: gray">退货时间：</span>
                                            </el-col>
                                            <el-col :span="10">
                                                <span style="color: black">{{hhdlist.barterThtime | formatDate}}</span>
                                            </el-col>
                                            <el-col :span="2">
                                                <span style="color: gray">完成时间：</span>
                                            </el-col>
                                            <el-col :span="4">
                                                <span style="color: black">{{hhdlist.barterTime | formatDate}}</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="换货明细" name="third" style="height: 380px;">
                            <div>
                                <!--产品信息-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="hhdxqlist"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                    align="center"
                                                    prop="prodetailId.productName"
                                                    label="产品名称">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="产品规格">
                                                <template slot-scope="s">
                                                    <span v-for="pro in s.row.prodetailId.qmodeldetails" :key="pro.prodetailId">
                                                        {{pro.modetContent}}
                                                    </span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="数量"
                                                    prop="barterdetailsNumber">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="备注"
                                                    prop="barterdetailsBz">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <!--小计-->
                                    <div style="margin-top: 30px;height: 20px;margin-left: 840px;;font-size: 13px">
                                        <span>
                                            以下:
                                        </span>
                                        <span style="color: #BFBFBF">
                                             100
                                        </span>
                                        <span>
                                            条订单:
                                        </span>
                                    </div>
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="换货订单" name="third2" style="height: 380px;">
                            <div>
                                <!--产品信息-->
                                <div style="width: 970px;margin: 10px 150px">
                                    <div STYLE="margin-top: -5px">
                                        <el-button style="margin-left: 10px" size="small" @click="xzdd()" type="primary" plain>根据该合同下单</el-button>
                                    </div>
                                    <!--产品表格-->
                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="hhddlist"
                                                style="width: 100%"
                                                max-height="380">
                                            <el-table-column
                                                fixed
                                                prop="orderNo"
                                                label="订单编号"
                                                sortable
                                                align="center"
                                                width="160">
                                            </el-table-column>
                                            <el-table-column
                                                    label="主题"
                                                    sortable
                                                    align="center"
                                                    width="160">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.orderTheme" class="businame" @click="dindanxq(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="客户"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.clientId.clientName" class="businame" @click="kehutodetails(sp.row)"></a>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="合同"
                                                    sortable
                                                    align="center"
                                                    width="150">
                                                <template slot-scope="sp">
                                                    <a v-html="sp.row.conId.conTheme" class="businame" @click="todetails(sp.row)"></a>
                                                </template>h
                                            </el-table-column>
                                            <el-table-column
                                                    label="下单日期"
                                                    align="center"
                                                    sortable
                                                    width="160">
                                                <template slot-scope="d">
                                                    {{d.row.orderTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    label="完成日期"
                                                    align="center"
                                                    sortable
                                                    width="160">
                                                <template slot-scope="d">
                                                    {{d.row.orderWctime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderTotal"
                                                    label="金额"
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    label="剩余回款金额"
                                                    sortable
                                                    align="center"
                                                    width="150"
                                                    prop="orderReturned">
                                            </el-table-column>
                                            <el-table-column
                                                    label="开票金额"
                                                    sortable
                                                    align="center"
                                                    width="150"
                                                    prop="orderInvoice">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderGross"
                                                    label="毛利"
                                                    sortable
                                                    align="center"
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderExchange"
                                                    label="是否换货"
                                                    sortable
                                                    align="center"
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderReturn"
                                                    label="是否退货"
                                                    align="center"
                                                    sortable
                                                    width="120">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderState"
                                                    label="状态"
                                                    align="center"
                                                    sortable
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderJfzt"
                                                    label="交付状态"
                                                    align="center"
                                                    sortable
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderHkzt"
                                                    label="回款状态"
                                                    align="center"
                                                    sortable
                                                    width="140">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderRemark"
                                                    label="备注"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="orderPeople"
                                                    label="负责人"
                                                    align="center"
                                                    sortable
                                                    width="100">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <br/>
                                    <!--小计-->
                                    <div style="margin-top: 10px;border-bottom: 1px dotted #BFBFBF;"></div>

                                    <div style="border: 1px solid #EBEEF5;margin-top: 30px">
                                        <el-table
                                                :data="ddxqlist"
                                                style="width: 100%"
                                                max-height="300">
                                            <el-table-column
                                                    align="center"
                                                    prop="prodetailId.productName"
                                                    label="产品名称">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="产品规格">
                                                <template slot-scope="s">
                                                    <span v-for="pro in s.row.prodetailId.qmodeldetails" :key="pro.prodetailId">
                                                        {{pro.modetContent}}
                                                    </span>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="总数量"
                                                    prop="orderdetailNumber">
                                            </el-table-column>
                                            <el-table-column
                                                    align="center"
                                                    label="剩余发货数量"
                                                    prop="orderdetailJfnumber">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    export default {
        name: "ZHetonXq",
        data() {
            return {
                /*对齐方式*/
                labelPosition:'left',
                //换货单
                hhdlist:{
                    barterId:0,
                    clientId:{
                        clientId:0,
                        updateTime:null,
                        clientIndustry:null,
                        clientSource:null,
                        clientUrl:null,
                        establishPerson:null,
                        establishTime:null,
                        clientName:'',
                        clientRank:null,
                        clientPhone:null,
                        clientMobile:null,
                        clientSite:null,
                        clientRemark:null,
                        clientPeople:null,
                        clientCjpeople:null,
                        clientState:0,
                        clientIffollowup:0,
                        clientSheng:null,
                        clientSz:null,
                        empId:null,
                        tfyclueFormsByClueId:null,
                        tfylinkmanFormsByClientId:null,
                        zbartersByClientId:null,
                        zcontractsByClientId:null,
                        zdeliverylogsByClientId:null,
                        zinvoicesByClientId:null,
                        zordersByClientId:null
                    },
                    orderId:{
                        orderId:0,
                        clientId:null,
                        conId:null,
                        orderNo:null,
                        orderTheme:'',
                        orderTotal:null,
                        orderReturned:null,
                        orderInvoice:null,
                        orderGross:null,
                        orderTime:null,
                        orderWctime:null,
                        orderExchange:null,
                        orderReturn:null,
                        orderState:null,
                        orderRemark:null,
                        orderPeople:null,
                        orderZt:null,
                        zbartersByOrderId:null,
                        zorderdetailsByOrderId:null
                    },
                    barterOrderNo:{
                        orderId:null,
                        clientId:null,
                        conId:null,
                        orderNo:null,
                        orderTheme:'',
                        orderTotal:null,
                        orderReturned:null,
                        orderInvoice:null,
                        orderGross:null,
                        orderTime:null,
                        orderWctime:null,
                        orderExchange:null,
                        orderReturn:null,
                        orderState:null,
                        orderRemark:null,
                        orderPeople:null,
                        orderZt:null,
                        zbartersByOrderId:null,
                        zorderdetailsByOrderId:null
                    },
                    barterNo:'',
                    barterOperator:'',
                    barterTime:'',
                    barterThtime:'',
                    barterWarehouse:'',
                    barterState:'',
                    barterGoodsState:'',
                    barterAudit:'',
                    zbarterdetailsByBarterId:[],
                    barterTheme:null,
                    barterRemark:null
                },
                //换货单详情
                hhdxqlist:[],
                activeName2:'first',
                hhddlist:[],
                ddxqlist:[]
            }
        },
        methods: {
            xzdd(){
                this.$router.push({
                    path:'/ddxinzen',
                    query: {xzhh:this.hhdlist,dz:'hhxq'}
                });
            },
            handleClick(tab, event) {
                window.console.log(tab, event);
            },
            showjl(){
                this.jl=true;
            },
            showprotab(){
                this.jilutankuan=true;
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            showaddprotab(){
                this.addprotankuan=true;
            },
            hh(){
                this.$axios.get("http://localhost:8088/huanhuo/hhdcp",{params:{search:this.hhdlist.barterId}})
                    .then(v=>{
                            this.hhdxqlist = v.data;
                        }
                    ).catch()
            },
            dd(){
                this.$axios.get("http://localhost:8088/dindan/hh_dd",{params:{search:this.hhdlist.barterOrderNo.orderId}})
                    .then(v=>{
                            this.hhddlist = v.data;
                        }
                    ).catch()
            },
            ddxq(dd){
                this.$axios.get("http://localhost:8088/dindan/list_ddxqcp",{params:{search:dd}})
                    .then(v=>{
                            this.ddxqlist = v.data;
                        }
                    ).catch()
            }
        },
        created: function () {
            if(this.$route.query.key!=null){
                this.hhdlist=this.$route.query.key;
                this.hh();
                this.dd();
                this.ddxq(this.hhdlist.barterOrderNo.orderId);
            }
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd  hh:mm:ss");
                } else {
                    return "";
                }
            }
        }
    }
</script>

<style scoped>

    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 50px;
    }
</style>